<template>
  <view class="cinema-filter-bar" :class="[customClass]">
    <zm-dropdown ref="dropdown" title-size="28rpx" icon-size="18rpx" border-radius="12rpx">
      <zm-dropdown-item :title="filterForm.countyName" max-height="600rpx" :color="filterForm.countyId && filterForm.countyId != '-1' ? useColor('theme') : ''">
        <view class="flex flex-col flex-1 px-24 p-24 font-26">
          <view class="flex justify-between py-12" :class="{ 'text-theme': filterForm.countyId == '-1' }" @click="handleClickRegionBtn()">
            <text>全部地区</text>
            <text>{{ cinemaCount }}家</text>
          </view>
          <view
            v-for="(item, index) in regionList"
            :key="index"
            class="flex justify-between py-12"
            :class="{ 'text-theme': filterForm.countyId == item.regionId }"
            @click="handleClickRegionBtn(item)"
          >
            <text>{{ item.regionName }}</text>
            <text>{{ item.cinemaNum }}家</text>
          </view>
        </view>
      </zm-dropdown-item>
      <zm-dropdown-item :title="filterForm.lineName" :color="filterForm.lineId ? useColor('theme') : ''" @open="onLineNameOpen">
        <view class="flex flex-col flex-1 px-24 p-24 font-26">
          <view class="grid grid-cols-4 gap-x-15 gap-y-20">
            <text v-for="(item, index) in cinemaLine" :key="index" class="filter-btn text-row-1" :class="{ 'is-active': item.active }" @click="handleClickLineBtn(index)">
              {{ item.lineName }}
            </text>
          </view>
        </view>
        <view slot="footer" class="flex justify-between p-24 solid-top-2">
          <zm-button plain height="70rpx" width="340rpx" text-color="#666666" border-color="#cccccc" color="transparent" round @click="handleResetLine">重置</zm-button>
          <zm-button type="primary" height="70rpx" width="340rpx" round @click="handleConfirmLineName">确定</zm-button>
        </view>
      </zm-dropdown-item>
      <zm-dropdown-item :title="filterForm.sortName">
        <view class="flex flex-col flex-1 px-24 p-24 font-26">
          <view class="flex justify-between py-12" :class="{ 'text-theme': filterForm.sort == 'distance' }" @click="handleClickSortBtn('distance')">
            <text>距离近</text>
          </view>
          <view class="flex justify-between py-12" :class="{ 'text-theme': filterForm.sort == 'lowTicket' }" @click="handleClickSortBtn('lowTicket')">
            <text>价格低</text>
          </view>
        </view>
      </zm-dropdown-item>
      <zm-dropdown-item title="筛选" height="600rpx" :color="filterTitleColor" @open="onFilterOpen">
        <view class="flex flex-col flex-1 px-24 p-24 font-26">
          <view class="py-12 text-666 pb-20 font-26">开放时间</view>
          <view class="grid grid-cols-4 gap-x-15 gap-y-20">
            <text v-for="(item, index) in conditionPlanTime" :key="index" class="filter-btn text-row-1" :class="{ 'is-active': item.active }" @click="handleClickTimeBtn(index)">
              {{ item.timeText }}
            </text>
          </view>
          <view class="py-12 text-666 py-20 font-26">放映影厅</view>
          <view class="grid grid-cols-4 gap-x-15 gap-y-20">
            <text v-for="(item, index) in hallType" :key="index" class="filter-btn text-row-1" :class="{ 'is-active': item.active }" @click="handleClickHallTypeBtn(index)">
              {{ item.cinemaHallTypeName }}
            </text>
          </view>
          <block v-if="cinemaTag.length">
            <view class="py-12 text-666 py-20 font-26">影院标签</view>
            <view class="grid grid-cols-4 gap-x-15 gap-y-20">
              <text v-for="(item, index) in cinemaTag" :key="index" class="filter-btn text-row-1" :class="{ 'is-active': item.active }" @click="handleClickTagBtn(index)">
                {{ item.cinemaTag }}
              </text>
            </view>
          </block>
        </view>
        <view slot="footer" class="flex justify-between p-24 solid-top-2">
          <zm-button plain height="70rpx" width="340rpx" text-color="#666666" border-color="#cccccc" color="transparent" round @click="handleResetFilter">重置</zm-button>
          <zm-button type="primary" height="70rpx" width="340rpx" round @click="handleConfirmFilter">确定</zm-button>
        </view>
      </zm-dropdown-item>
    </zm-dropdown>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import { merge } from "@/utils/utils"
import { mapGetters } from "vuex"
export default {
  name: "cinema-filter-bar",
  mixins: [hook, weixin],
  props: {
    // 默认筛选数据
    defaultData: { type: Object, default: () => ({}) },
    // 接口参数
    params: { type: Object, default: () => ({}) },
    customClass: { type: String, default: "" }
  },
  data() {
    return {
      hallType: [], // 放映影厅
      cinemaTag: [], // 影院标签
      cinemaLine: [], // 品牌
      regionList: [], // 区域列表
      conditionPlanTime: [], // 开放时间
      cinemaCount: 0,
      filterForm: { countyId: "", countyName: "区域", sort: "distance", sortName: "距离近", timeId: "", lineId: "", lineName: "品牌", cinemaTagId: "", hallTypeId: "" },
      defaultFilterForm: { countyId: "", countyName: "区域", sort: "distance", sortName: "距离近", timeId: "", lineId: "", lineName: "品牌", cinemaTagId: "", hallTypeId: "" }
    }
  },
  computed: {
    filterTitleColor() {
      return this.filterForm.timeId || this.filterForm.cinemaTagId || this.filterForm.hallTypeId ? this.useColor("theme") : ""
    },
    ...mapGetters(["cityCode", "location"])
  },
  watch: {
    cityCode: {
      handler() {
        this.handleRefresh()
      }
    }
  },
  mounted() {
    this.init()
    this.handleRefresh()
  },
  methods: {
    init() {
      this.defaultFilterForm = merge(this.defaultFilterForm, this.defaultData)
      this.filterForm = uni.$clone(this.defaultFilterForm)
    },
    // 刷新数据
    handleRefresh() {
      this.handleGetCityCinema()
      this.handleGetCinemaCondition()
    },
    // 影院信息
    async handleGetCinemaCondition() {
      const res = await uni.$api.cinema.getCinemaCondition({ filmCode: this.params.filmCode })
      this.hallType = uni.$uniqueArrayObjects(res.hallType, "cinemaHallTypeName")
      this.cinemaTag = res.cinemaTag.map((item) => ({ ...item, active: false }))
      this.cinemaLine = res.cinemaLine.map((item) => ({ ...item, active: false }))
      this.conditionPlanTime = res.conditionPlanTime.map((item) => ({ ...item, active: false }))
    },
    // 区域信息
    async handleGetCityCinema() {
      const res = await uni.$api.cinema.getCityCinema({ filmCode: this.params.filmCode })
      this.regionList = res.regionList
      this.cinemaCount = res.count
    },
    // 筛选控制-----------
    onLineNameOpen() {
      const lineIds = this.filterForm.lineId.split(",")
      if (lineIds.length) {
        this.cinemaLine.forEach((item) => {
          if (lineIds.includes(item.lineId)) item.active = true
        })
      }
    },
    onFilterOpen() {
      const timeIds = this.filterForm.timeId.split(",")
      const hallTypeIds = this.filterForm.hallTypeId.split(",")
      const cinemaTagIds = this.filterForm.cinemaTagId.split(",")
      if (timeIds.length) {
        this.conditionPlanTime.forEach((item) => {
          if (timeIds.includes(String(item.timeId))) item.active = true
        })
      }
      if (hallTypeIds.length) {
        this.hallType.forEach((item) => {
          if (hallTypeIds.includes(item.hallTypeId)) item.active = true
        })
      }
      if (cinemaTagIds.length) {
        this.cinemaTag.forEach((item) => {
          if (cinemaTagIds.includes(item.cinemaTagId)) item.active = true
        })
      }
    },
    handleResetFilter() {
      this.cinemaTag.forEach((item) => (item.active = false))
      this.cinemaLine.forEach((item) => (item.active = false))
      this.hallType.forEach((item) => (item.active = false))
      this.conditionPlanTime.forEach((item) => (item.active = false))
    },
    handleResetLine() {
      this.cinemaLine.forEach((item) => (item.active = false))
    },
    handleConfirmLineName() {
      this.filterForm.lineId = this.cinemaLine
        .filter((item) => item.active)
        .map((item) => item.lineId)
        .join()
      this.$emit("filter", this.filterForm)
      this.$refs.dropdown.close()
    },
    handleConfirmFilter() {
      this.filterForm.timeId = this.conditionPlanTime
        .filter((item) => item.active)
        .map((item) => item.timeId)
        .join()
      this.filterForm.hallTypeId = this.hallType
        .filter((item) => item.active)
        .map((item) => item.hallTypeId)
        .join()
      this.filterForm.cinemaTagId = this.cinemaTag
        .filter((item) => item.active)
        .map((item) => item.cinemaTagId)
        .join()
      this.$emit("filter", this.filterForm)
      this.$refs.dropdown.close()
    },
    // 点击下拉区域
    handleClickRegionBtn(item) {
      this.filterForm.countyId = item ? item.regionId : "-1"
      this.filterForm.countyName = item ? item.regionName : "全部地区"
      this.$forceUpdate()
      this.$emit("filter", this.filterForm)
      this.$refs.dropdown.close()
    },
    // 点击距离排序
    handleClickSortBtn(type) {
      const types = { distance: "距离近", lowTicket: "价格低" }
      this.filterForm.sort = type
      this.filterForm.sortName = types[type]
      this.$emit("filter", this.filterForm)
      this.$refs.dropdown.close()
    },
    // 点击开放时间
    handleClickTimeBtn(index) {
      this.$set(this.conditionPlanTime[index], "active", !this.conditionPlanTime[index].active)
      this.filterForm.timeId = this.conditionPlanTime
        .filter((item) => item.active)
        .map((item) => item.timeId)
        .join()
    },
    // 点击品牌
    handleClickLineBtn(index) {
      this.$set(this.cinemaLine[index], "active", !this.cinemaLine[index].active)
      this.filterForm.lineId = this.cinemaLine
        .filter((item) => item.active)
        .map((item) => item.lineId)
        .join()
    },
    // 点击标签
    handleClickTagBtn(index) {
      this.$set(this.cinemaTag[index], "active", !this.cinemaTag[index].active)
      this.filterForm.cinemaTagId = this.cinemaTag
        .filter((item) => item.active)
        .map((item) => item.cinemaTagId)
        .join()
    },
    handleClickHallTypeBtn(index) {
      this.$set(this.hallType[index], "active", !this.hallType[index].active)
      this.filterForm.hallTypeId = this.hallType
        .filter((item) => item.active)
        .map((item) => item.hallTypeId)
        .join()
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-filter-bar {
  z-index: 100;
  .filter-btn {
    height: 60rpx;
    padding: 0 12rpx;
    overflow: hidden;
    text-align: center;
    line-height: 60rpx;
    border-radius: 6rpx;
    background-color: #f4f6f7;

    &.is-active {
      color: $theme-color;
      background-color: $theme-color-1;
    }
  }
}
</style>
